window.onload = () => {
  class Wujie extends HTMLElement {
    constructor() {
      super();
      this.init();
    }

    init() {
      // 初始化
      const shaDow = this.attachShadow({ mode: "open" }); // mode:open，开启影子dom,样式隔离
      //   shaDow.innerHTML = `
      //   <div>1111</div>
      //   `;

      const templateDOm = document.querySelector(
        "#wujie-template"
      ) as HTMLTemplateElement;

      const clone = templateDOm.content.cloneNode(true) as DocumentFragment; // 必须cloneNode
      shaDow.appendChild(clone);
    }

    getAttr(str: string) {
      console.log("获取参数", this.getAttribute(str));
    }

    //生命周期自动触发有东西插入
    connectedCallback() {
      console.log("类似于vue 的mounted");
    }
    //生命周期卸载
    disconnectedCallback() {
      console.log("类似于vue 的destory");
    }
    //跟watch类似
    attributeChangedCallback(name: any, oldVal: any, newVal: any) {
      console.log("跟vue 的watch 类似 有属性发生变化自动触发");
    }
  }

  window.customElements.define("wu-jie", Wujie);
};
